<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" disabled="true">
				<view @click="childMethod" class="cu-avatar round lg" :style="getCount" style="background-color:white">
					<view v-show="pdNumber>0" class="cu-tag badge">{{pdNumber}}</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import eat0 from '../static/eat-0.png';
	import eat1 from '../static/eat-1.png';
	import eat2 from '../static/eat-2.png';
	import eat3 from '../static/eat-3.png';
	export default {
		props: {
			pdNumber: 0
		},
		computed: {
			getCount() {
				if (this.pdNumber > 0) {
					if (this.pdNumber >= 7) {
						return "background-image:url(" + eat3 + ")";
					} else if (this.pdNumber >= 5) {
						return "background-image:url(" + eat2 + ")";
					} else if (this.pdNumber >= 3) {
						return "background-image:url(" + eat1 + ")";
					} else {
						return "background-image:url(" + eat0 + ")";
					}
				} else {
					return "background-image:url(" + eat0 + ")";
				}

			}
		},
		data() {
			return {
				x: 30, //x坐标
				y: 780, //y坐标
			}
		},
		methods: {
			childMethod() {
				this.$emit('fatherMethod');
			}
		}
	}
</script>

<style lang="scss">
	$all_width: 96rpx;
	$all_height: 96rpx;

	.movable-area {
		height: 85vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件

			image {
				width: $all_width;
				height: $all_height;
			}
		}
	}
</style>